import React from 'react'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Form, Input, Button, Breadcrumb, DatePicker } from 'antd'
import TableList from './component/TableList'
import TableDetailsList from './component/TableDetailsList'
import VipMainList from './component/VipMainList'
import CheckInfoModal from './component/CheckInfoModal'
import RechargeModal from './component/RechargeModal'
import ChangeToBuyerModal from '../Buyer/AdBuyerModal/index'
import styles from './index.less'

const FormItem = Form.Item;

@Form.create()
@connect(({ vip, loading }) => ({
  vip,
  loading: loading.models.vip,
}))

export default class VipList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      statusNumber: "1",
      modalVisible: false,
      modalVisibleone: false,
      item: {},
      dateStrings: [],
      pageSize: 1,
      userId: null,
      vipItem: {},
      detileFilter: {
        beginTime: '',
        endTime: '',
        index: 1,
      },//会员明细，赛选数据
    }
  }
  onGetDetails = (record) => {
    this.setState({ statusNumber: '2', vipItem: record })
    this.props.dispatch({
      type: "vip/getConsumerFinancialDetails",
      payload: { consumerId: record.id }
    })

  }

  onGetList = () => {
    this.setState({ statusNumber: '1' })
  }
  onLookList = (record) => {
    this.setState({ modalVisible: true })
    this.props.dispatch({
      type: "vip/getConsumerDetail",
      payload: { consumerId: record.id }
    })
  }

  onOpenRecharge = (record) => {
    // this.props.dispatch({
    //   type: 'vip/getCode'
    // })
    this.setState({
      modalVisibleone: true,
      userId: record.id
    })
  }
  getCode = () => {
    this.props.dispatch({
      type: 'vip/getCode'
    })
  }
  onCancelRecharge = () => {
    this.setState({ modalVisibleone: false })
  }
  getrecharge = (data) => {
    this.props.dispatch({
      type: "vip/getrecharge",
      payload: {
        ...data,
        userId: this.state.userId
      }
    })
  }

  onCancel = () => {
    this.setState({ modalVisible: false })
  }

  onChangePage = (page) => {
    this.props.dispatch({
      type: "vip/findConsumerListPage",
      payload: {
        index: page
      }
    })
  }

  onSearch = (data) => {
    this.props.dispatch({
      type: "vip/SearchConsumer",
      payload: { consumerName: data }
    })
  }

  onChangeToBuyer = (record) => {
    console.log('record12', record)
    this.setState({ item: record })
    this.props.dispatch({
      type: "vip/showModal",
      payload: {
        visible: true
      }
    })
  }

  onEditBuyer = (data) => {
    this.props.dispatch({
      type: "vip/hideModal",
      payload: {
        visible: false
      }
    })
    this.props.dispatch({
      type: "vip/vipChangeToBuyer",
      payload: data
    })
  }

  //删除会员
  deleteVipList = (data) => {
    this.props.dispatch({
      type: "vip/getdeleteVip",
      payload: data
    })
  }

  onHideModal = () => {
    this.props.dispatch({
      type: "vip/hideModal",
      payload: {
        visible: false
      }
    })
  }

  onChangeDate = (dateStrings) => {
    this.setState({ dateStrings })
  }

  onDetailsPage = (page) => {
    console.log(11111, page)
    this.setState({ pageSize: page })
    const { vipItem, detileFilter } = this.state
    this.props.dispatch({
      type: "vip/getConsumerFinancialDetailsSearch",
      payload: {
        ...detileFilter,
        consumerId: vipItem.id,
        index: page,
      }
    })
  }
  onDetailsTimeSearch = () => {
    const { dateStrings, pageSize, vipItem, } = this.state;
    let beginTime = '', endTime = '';
    if (dateStrings.length) {
      beginTime = dateStrings[0];
      endTime = dateStrings[1];
    }
    this.setState({
      detileFilter: {
        consumerId: vipItem.id,
        beginTime,
        endTime,
        index: 1,
      }
    })
    this.props.dispatch({
      type: "vip/getConsumerFinancialDetailsSearch",
      payload: {
        consumerId: vipItem.id,
        beginTime,
        endTime,
        index: 1,
      }
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const { statusNumber, modalVisible, modalVisibleone, item, selectvipid, userId } = this.state
    const { ConsumerListItem, ConsumerDetailItem, vipDetailsItem, visible, modalType } = this.props.vip
    const { loading } = this.props;
    console.log('ConsumerDetailItem', ConsumerDetailItem)
    return (
      <div className={styles.VipList}>
        {statusNumber == '1' ?
          <VipMainList
            onOpenRecharge={this.onOpenRecharge}
            onChangeToBuyer={this.onChangeToBuyer}
            onSearch={this.onSearch}
            deleteVipList={this.deleteVipList}
            onChangePage={this.onChangePage}
            ConsumerListItem={ConsumerListItem}
            getCode={this.getCode}
            onGetDetails={this.onGetDetails}
            loading={loading}
            onLookList={this.onLookList} /> :
          <TableDetailsList
            vipDetailsItem={vipDetailsItem}
            onDetailsPage={this.onDetailsPage}
            onChangeDate={this.onChangeDate}
            onDetailsTimeSearch={this.onDetailsTimeSearch}
            loading={loading}
            onGetList={this.onGetList} />
        }
        {modalVisible && <CheckInfoModal
          modalVisible={modalVisible}
          ConsumerDetailItem={ConsumerDetailItem}
          onCancel={this.onCancel} />
        }
        {
          visible && <ChangeToBuyerModal
            findOneItem={item}
            onHideModal={this.onHideModal}
            onEditBuyer={this.onEditBuyer}
            modalVisibel={visible} />
        }
        {modalVisibleone && <RechargeModal
          modalVisibleone={modalVisibleone}
          getrecharge={this.getrecharge}
          getCode={this.getCode}
          onCancelRecharge={this.onCancelRecharge} />
        }
      </div>

    );
  }
};
